import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, ScrollView } from '@tarojs/components'
import dayjs from 'dayjs'
import Iconfont from '@/components/Iconfont'
import { getCouponList } from '@/api/coupon'
import EmptyView from '@/components/EmptyView'
import './index.scss'

interface State {
  coupon: GlobalCoupon.Coupon[] | null
  tabIndex: number
}

export default class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {
      tabIndex: 3,
      coupon: null
    }
  }
  state: State
  UNSAFE_componentWillMount() { }
  componentDidMount() {
    this.getCouponData()
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  couponStatus = {
    '0': '未使用',
    '1': '已使用',
    '2': '已过期',
    '3': '已转增'
  }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }


  goToDetails(id: string) {
    Taro.navigateTo({
      url: '/pages/coupon/details/index?id=' + id
    })
  }

  getCouponData() {
    const { tabIndex } = this.state
    getCouponList({
      type: tabIndex
    }).then(res => {
      const coupon = res.data['data']
      this.setState({
        coupon
      })
    })
  }

  // 用户红包类型列表
  userCouponListView() {
    const { coupon } = this.state
    const couponStatus = this.couponStatus
    return coupon && coupon.length ? (
      <ScrollView scrollY className='tab-cont'>
        <View className='tab-cont-item'>
          {coupon.map(v => {
            return (
              <View key={v.id} onClick={(e) => this.goToDetails(v.id, e)} className='hstab-cont-item-li grayscale'>
                <View className='tab-cont-bd'>
                  {v.status > 0 && (
                    <View className='coupon-tips-block'>
                      {couponStatus[v.status]}
                    </View>
                  )}
                  <View className='price'>
                    {
                      v.discountType === 1 ? <View className='strong'>￥{v.baseAmount}</View> : <View className='strong name'>商品券</View>
                    }
                    {v.minPrice > 0 && <View className='sub-tips'>满{v.minPrice}元可用</View>}
                  </View>
                  <View className='context'>
                    <View className='coupon-name'>
                      <View className='strong'>{v.name}</View>
                      <View className='coupon-type'>
                        {v.type === 1 && <Iconfont size='24' name='icon-zu21' />}
                        {v.type === 2 && <Iconfont size='24' name='icon-zu26' />}
                        {v.type === 3 && <Iconfont size='24' name='icon-zu18' />}
                        {v.typeLabel}
                      </View>
                    </View>
                    {v.carLicenseLimit && <View className='msgtext'>限{v.carLicenseLimit}使用</View>}
                    <View className='msgtext'>
                      {dayjs.unix(v.startAt).format('YYYY年MM月DD日') + '-' + dayjs.unix(v.endAt).format('YYYY年MM月DD日')}
                    </View>
                  </View>
                </View>
                <View className='tab-cont-bt'>
                  <View className='gotext'>
                    去使用
                    <View className='arw'></View>
                  </View>
                </View>
              </View>
            );
          })}
        </View>
        <View className='scroll-bt-tips'>没有更多记录啦</View>
      </ScrollView>
    ) : <EmptyView title='暂无卡券使用记录' />
  }
  render() {
    return (
      <View className='coupon-index'>
        {this.userCouponListView()}
      </View>
    )
  }
}
